<template>
    <view class="camera-guide">
        <view class="mark" @click.stop="closed"></view>
        <view class="drawer" @click.stop="">
            <view class="drawer-header">
                <view class="drawer-header-touch" @click.stop="closed"></view>
                <!--  title S -->
                <view class="drawer-header-title">
                    <view class="dht-txt">
                        {{ signType == 1 ? '签到' : '签退' }}拍照指引
                    </view>
                </view>
                <!-- title  E -->
    </view>

    <!-- 选择题内容 S -->
    <scroll-view @scroll="onScroll" ref="scrollView" scroll-y class="drawer-content">

        <swiper v-if="guide.images&&guide.images.length" indicator-color="#CCCCCC" indicator-active-color="#0091FF" class="swiper" circular
            :indicator-dots="true" :autoplay="false" :duration="300">
            <swiper-item v-for="(item, index) in guide.images" :key="index">
                <image :src="item.url" :mode="'aspectFit'" :lazy-load="true" />
            </swiper-item>
        </swiper>
        <view class="conts" >
            <rich-text :nodes="guide.desc"></rich-text>
        </view>
       
    </scroll-view>
    <!-- 选择题内容 E -->
    <view class="drawer-footer">

        <view @click="closed" class="drawer-footer-btn">
            我知道了

        </view>
            </view>
        </view>
    </view>
</template>
<script>
import { getConfig } from '@/apis/sign.js';
import { mapState } from 'vuex';
export default {
	name: 'camera-guide',
	data() {
		return {
			show: false,
			scrollTop: 0,
			signType: 1,
			// 1保养 2维修
			orderType:1,
			config: {
				 
			},
		};
	},
	onLoad(options) {
		this.signType = options.signType || 1;
		this.orderType = options.orderType || 1;
	},

	computed: {
		...mapState('system', ['onlineStatus']),
		guide() {
			if (this.orderType == 1) {
				if (this.signType == 1) {
					return {
						desc: this.config.cheSignInDesc || '',
						images: this.config.cheSignInImageList || []
					};
				} else {
					return {
						desc: this.config.cheSignOutDesc || '',
						images: this.config.cheSignOutImageList || []
					};
				}
			} else {
				if (this.signType == 1) {
					return {
						desc: this.config.malSignInDesc || '',
						images: this.config.malSignInImageList || []
					};
				} else {
					return {
						desc: this.config.malSignOutDesc || '',
						images: this.config.malSignOutImageList || []
					};
				}
			}
		}
	},
	created() {
		if (this.onlineStatus) {
			// 在线
			this.getConfig();
		} else {
			// 离线
			this.getCameraConfig();
		}
	},
	methods: {
        
		getCameraConfig() {
			uni.getStorage({
				key: 'offline_config',
				success: (res) => {
					this.config = res.data || {};
					console.log('xxx', this.config);
				},
				fail: () => {
					this.getConfig();
				},
			});
		},
		getConfig() {
			getConfig().then(res => {
				this.config = res.data.config;
				uni.setStorage({
					key: 'offline_config',
					data: res.data.config
				});
			});
		},
		closed() {
			window.FlutterBridge.postMessage(JSON.stringify(
				{
					action: 'close-guide',
				}
			));
		},
	}
};
</script>
<style lang="scss" scoped>
.camera-guide {

    .drawer {
        width: 100%;
        height: 100%;
        background-color: #fff;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 100;
        display: flex;
        flex-direction: column;
        animation: frame 0.2s linear;
        border-radius: 4px 4px 0px 0px;
        overflow: hidden;

        &-header {
            background-color: #fff;

            &-touch {
                width: 100%;
                height: 10px;
                padding: 20rpx 0;
                position: relative;
            }

            &-touch::after {
                content: '';
                position: absolute;
                width: 64rpx;
                height: 10rpx;
                border-radius: 2rem;
                left: calc(50% - 32rpx);
                background: #D8D8D8;
            }

            &-title {
                width: calc(100% - 60rpx);
                border-bottom: 1px solid #D8D8D8;
                padding: 0 30rpx;
                padding-bottom: 30rpx;

                .dht-txt {
                    width: 100%;
                    color: #333333;
                    font-weight: bold;
                    font-size: 32rpx;
                }

                .dht-dsp {
                    width: 100%;
                    color: #666666;
                    font-size: 24rpx;
                    font-weight: normal;
                    padding-top: 10rpx;

                    .light {
                        color: #E02020;
                    }
                }

            }

        }

        &-content {
            flex: 1;
            width: 100%;
            height: calc(100% - 160rpx - 110rpx);
            overflow-y: scroll;
            color: #333333;

            .swiper {
                width: 500rpx;
                height: 700rpx;
                margin: 20rpx auto;

                image {
                    width: 500rpx;
                    height: 100%;
                }
            }

            .conts{
                width: calc(100% - 40rpx);
                padding: 20rpx;
            }

        }

        &-footer {
            height: 110rpx;
            width: 100%;
            background-color: #fff;
            border-top: 1px solid #D8D8D8;
            padding-bottom: 20rpx;

            &-btn {
                width: calc(100% - 80rpx);
                height: 70rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                border-radius: 8rpx;
                margin: 12px auto;
                font-size: 29rpx;
                text-align: center;
                overflow: hidden;
                color: #fff;
                line-height: 70rpx;
                background-color: #0091FF;
            }

        }

    }
}
</style>